<template>
    <div class="stats-container">
      <div class="date-picker">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="loadData"
        />
      </div>
  
      <div class="charts">
        <div class="chart-item">
          <h3>订单类型分布</h3>
          <v-chart class="chart" :option="typeChartOption" autoresize />
        </div>
        
        <div class="chart-item">
          <h3>订单趋势</h3>
          <v-chart class="chart" :option="trendChartOption" autoresize />
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, onMounted } from 'vue'
  import { use } from 'echarts/core'
  import { CanvasRenderer } from 'echarts/renderers'
  import { PieChart, LineChart } from 'echarts/charts'
  import {
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GridComponent
  } from 'echarts/components'
  import VChart from 'vue-echarts'
  import axios from '@/utils/request'
  
  use([
    CanvasRenderer,
    PieChart,
    LineChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    GridComponent
  ])
  
  const dateRange = ref([new Date(), new Date()])
  const typeChartOption = ref({})
  const trendChartOption = ref({})
  
  const loadData = async () => {
    const [startDate, endDate] = dateRange.value
    const params = {
      startDate: startDate.toISOString().split('T')[0],
      endDate: endDate.toISOString().split('T')[0]
    }
  
    // 获取类型统计数据
    const typeRes = await axios.get('/orderStats/type', { params })
    updateTypeChart(typeRes.data)
  
    // 获取趋势统计数据
    const trendRes = await axios.get('/orderStats/trend', { params })
    updateTrendChart(trendRes.data)
  }
  
  const typeMap = {
    1: '加入班级',
    2: '考试费用',
    3: '购买题库',
    4: '账号充值'
  }
  
  const updateTypeChart = (data) => {
    typeChartOption.value = {
      title: { text: '订单类型分布', left: 'center' },
      tooltip: { trigger: 'item' },
      legend: { orient: 'vertical', left: 'left' },
      series: [{
        type: 'pie',
        radius: '50%',
        data: data.map(item => ({
          value: item.orderCount,
          name: typeMap[item.orderType]
        })),
        emphasis: { itemStyle: { shadowBlur: 10 } }
      }]
    }
  }
  
  const updateTrendChart = (data) => {
    trendChartOption.value = {
      title: { text: '订单趋势', left: 'center' },
      xAxis: {
        type: 'category',
        data: data.map(item => item.date)
      },
      yAxis: { type: 'value' },
      tooltip: { trigger: 'axis' },
      series: [{
        data: data.map(item => item.orderCount),
        type: 'line',
        smooth: true,
        areaStyle: {}
      }]
    }
  }
  
  onMounted(() => {
    loadData()
  })
  </script>
  
  <style scoped>
  .stats-container {
    padding: 20px;
  }
  .charts {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 20px;
    margin-top: 20px;
  }
  .chart-item {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);
  }
  .chart {
    height: 400px;
  }
  </style>